<template>
  <view class="feedback-container">
    <view class="feedback-form">
      <view class="form-item">
        <view class="item-label">
          <text class="required">*</text>
          <text>问题描述</text>
        </view>
        <textarea
          class="description-input"
          v-model="description"
          placeholder="请描述您的问题，以便我们尽快为您处理"
          :maxlength="200"
          auto-height
        />
        <text class="word-count">{{description.length}}/200</text>
      </view>
      
      <view class="form-item">
        <view class="item-label">
          <text>上传附件</text>
          <text class="upload-tip">(最多5张)</text>
        </view>
        <view class="upload-area">
          <view class="image-list">
            <view class="image-item" v-for="(item, index) in imageList" :key="index">
              <image :src="item" mode="aspectFill"></image>
              <view class="delete-btn" @click="deleteImage(index)">
                <uni-icons type="close" size="20" color="#fff"></uni-icons>
              </view>
            </view>
            <view class="upload-btn" @click="chooseImage" v-if="imageList.length < 5">
              <uni-icons type="plusempty" size="30" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="submit-wrapper">
      <button class="submit-btn" @click="submitFeedback" :disabled="!description.trim()">
        提交
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      description: '',
      imageList: []
    }
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 5 - this.imageList.length,
        success: (res) => {
          this.imageList = [...this.imageList, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.imageList.splice(index, 1)
    },
    submitFeedback() {
      if (!this.description.trim()) {
        uni.showToast({
          title: '请输入问题描述',
          icon: 'none'
        })
        return
      }
      
      // TODO: 实现提交逻辑
      uni.showLoading({
        title: '提交中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        
        // 重置表单
        this.description = ''
        this.imageList = []
      }, 1500)
    }
  }
}
</script>

<style lang="scss">
.feedback-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.feedback-form {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  flex: 1;
  
  .form-item {
    margin-bottom: 30rpx;
    
    .item-label {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      font-size: 28rpx;
      color: #333;
      
      .required {
        color: #ff4d4f;
        margin-right: 4rpx;
      }
      
      .upload-tip {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}

.description-input {
  width: 100%;
  min-height: 200rpx;
  padding: 24rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  box-sizing: border-box;
}

.word-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  margin-top: 16rpx;
  display: block;
}

.upload-area {
  .image-list {
    display: flex;
    flex-wrap: wrap;
    margin: -12rpx;
    
    .image-item {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      margin: 12rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
        object-fit: cover;
      }
      
      .delete-btn {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        width: 36rpx;
        height: 36rpx;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      margin: 12rpx;
      background-color: #f8f8f8;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx dashed #ddd;
    }
  }
}

.submit-wrapper {
  padding: 30rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  
  &[disabled] {
    opacity: 0.6;
    background-color: #ccc;
  }
}
</style>